<template>
  <div class="agent-view" >
    <div class="agent-view-button">
      <el-button @click="editAgent('add')" type="primary">新增代理</el-button>
      <el-input clearable placeholder="请输入要搜索的代理人" v-model="agentName" class="input-with-select">
        <template #append>
          <el-button class="input-with-button" @click="searchAgent">搜索</el-button>
        </template>
      </el-input>
    </div>
    <div class="agent-view-info" v-loading="loading">
      <div v-if="state.listData.length > 0">
        <el-table :max-height="state.posheight" :data="state.listData" border>
          <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
          <el-table-column label="账号(用户名)" show-overflow-tooltip align="center">
            <template #default="scope">{{ scope.row.username }}</template>
          </el-table-column>
          <el-table-column label="密码" show-overflow-tooltip align="center">
            <template #default="scope">{{ scope.row.password_raw }}</template>
          </el-table-column>
          <el-table-column label="代理人" show-overflow-tooltip align="center">
            <template #default="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="220" show-overflow-tooltip align="center">
            <template #default="scope">
              <el-button @click.prevent="editAgent('update',scope.row)" type="primary" size="small">修改</el-button>
              <el-button @click.prevent="lookQs(scope.row)" type="success" size="small">查看二维码</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="right-view-page">
          <el-pagination 
            layout="total, prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
            :page-size="20"
            :pageSizes='[10, 20, 30, 40]'
            :current-page="currentPage">
          </el-pagination>
        </div>
      </div>
      <div v-else class="right-view-nodata">
        <img src="@/assets/img/no-data.png" alt="">
        <div>暂无数据</div>
      </div>
    </div>
    <!-- 新增修改代理 -->
    <el-dialog
      width="45%"
      :title="titleName + '代理数据'"
      :close-on-click-modal="false"
      v-model="agentVisible">
      <addAgent v-if="agentVisible" :parmas="{type:titleValue,rowInfo:state.rowInfo,agentStatus:'agent'}" @closeAgent="closeAgent"></addAgent>
    </el-dialog>
    <el-dialog
      title="二维码"
      :close-on-click-modal="false"
      v-model="state.qsImgVisible"
      width="350px">
      <div v-if="state.qsImgVisible">
        <img :src="state.qsImg" alt="">
      </div>
      <template #footer>
        <div style="text-align: center;font-size: 14px;color: #FF0000;">鼠标右击可保存图片到本地哦</div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { ref,reactive,onMounted,watch } from 'vue';
  import { ElMessage  } from 'element-plus';
  import API from "@/utils/api";
  import addAgent from './addAgent.vue'
  const agentVisible = ref(false)
  const titleName = ref('新增')
  const titleValue = ref('add')
  const agentName = ref('')
  const total = ref(0)
  const currentPage = ref(1)
  const loading = ref(false)
  const state = reactive({
    listData:[],
    rowInfo:{},
    h: document.body.clientHeight,
    posheight: 100,
    timer: false,
    qsImgVisible:false,
    qsImg:'',
  })
  watch(() => state.h, (newValue, oldValue) => {
    if(!state.timer) {
      state.posheight = newValue - 150
      state.timer = true
      setTimeout(function (){
        state.timer = false
      },400)
    }
  })
  const lookQs = ((item) => {
    getQsImg(item.id)
  })
  const getQsImg = ((id) => {
    API.agentList.getQsImg({id:id}, (res) => {
      if(res.code == 0) {
        state.qsImgVisible = true
        state.qsImg = res.data
      }
    })
  })
  const editAgent = ((type,item) => {
    agentVisible.value = !agentVisible.value
    titleValue.value = type
    state.rowInfo = item
    if(type === 'add') {
      titleName.value = '新增'
    }else {
      titleName.value = '修改'
    }
  })
  const closeAgent = ((type) => {
    agentVisible.value = false
    if(type == 1) {
      getAgentList()
    }
  })
  const searchAgent = (() => {
    currentPage.value = 1
    getAgentList()
  })
  const getAgentList = (() => {
    loading.value = true
    API.agentList.getAgentList({name:agentName.value,page:currentPage.value,limit:20,}, (res) => {
      loading.value = false
      if(res.code === 0) {
        state.listData = res.data.details
        total.value = res.data.total
      }
    })
  })
  const handleCurrentChange = ((val)=>{
    currentPage.value = val
    getAgentList()
  })
  function posTableHeight () {
    let h = document.body.clientHeight,
    new_h = h - 150;
    state.posheight = new_h;
  }
  onMounted(() => {
    getAgentList()
    posTableHeight()
    window.onresize = () => {
      return (() => {
        let a = document.body.clientHeight
        state.h = a
      })()
    }
  })
</script>

<style lang="scss" scoped>
.agent-view {
  padding: 20px;
  .agent-view-button {
    display: flex;
    text-align: start;
    .input-with-select {
      margin-left: 15px;
    }
    .input-with-button {
      color: #fff;
      background: #409eff;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    .el-input-group {
      width: 370px;
    }
  }
  .right-view-nodata {
    margin-top: 160px;
  }
  .agent-view-info {
    margin: 20px 0;
  }
  .right-view-page {
    display: flex;
    justify-content: end;
    margin-top: 15px;
  }
}
</style>